import React, { Component } from "react";

class Field extends Component{
    state={
        value:""
    }
    clear(){
        this.setState({
            value:""
        })
    }
    setValue(val){
        this.setState({
            value:val
        })
    }
    render() {
        return <div style={{background:"pink"}}>
            <label >{this.props.label}</label>
            <input type={this.props.type}  onChange={(evt)=>{
                console.log("evt",evt.target.value);
              this.setState({
                  value:evt.target.value
              })
              
            }}   value={this.state.value} />
        </div>
    }
}
export default class App extends Component {
 
    username=React.createRef()
    password=React.createRef()
  render() {
    return <div>
        <h1>登录页面</h1>
        <Field label="用户名" type="text" ref={this.username}></Field>
        <Field label="密码" type="password" ref={this.password} ></Field>
        <button onClick={()=>{
 console.log(this.username.current);

        }}>登錄</button>
        <button onClick={()=>{
 console.log(this.username.current);
 this.username.current.clear()
 this.password.current.clear()
 this.username.current.setValue(localStorage.getItem("username"))
        }}>取消</button>
    </div>;
  }
}   
